import echarts from 'echarts'

import request from '@/utils/request'
import { getAllocation } from '../../allocation/js'

export function getPrediction(returnId) {
  return request({
    url: '/cloud/jcce/v1.0/kt2/getPrediction',
    method: 'get'
  })
}

export default {
  name: 'reconfiguration',
  data() {
    return {
      nextHour: '',
      dataInfo: []
    }
  },
  created() {
  },
  mounted() {
    const now = new Date()
    const remainingHours = 1 // 下一个整点距离当前时间的小时数
    const nextHour = new Date(now.getTime() + (remainingHours * 60 * 60 * 1000))
    this.nextHour = nextHour.getHours() + ': 00'
    // 创建一个数组来存储每个整点的时间
    const timeList = []
    // 循环获取当前时间之后的24个整点时间
    for (let i = 1; i <= 24; i++) {
      const nextHour = new Date(now.getTime() + i * 60 * 60 * 1000)
      // 获取整点时间的小时数并转换为字符串
      const hourString = nextHour.getHours().toString()

      // 将小时字符串添加到数组中
      timeList.push(hourString)
      // 将整点时间添加到数组中
    }
    this.getData(timeList)
  },
  methods: {
    getData(timeList) {
      getPrediction().then((data) => {
        this.dataInfo = data.data
        setTimeout(() => {
          this.dataInfo.forEach((item, index) => {
            this.renderChart(index, item.options, timeList)
          })
        }, 100)
      }).catch((error) => {
        console.log(error)
      })
    },
    renderChart(index, options, timeList) {
      const chart = echarts.init(document.getElementById('chart' + index), 'dark')
      const option = {
        title: {
          text: '折线图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['内存', 'gpu', 'cpu']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        backgroundColor: 'transparent',
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: timeList
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} %'
          }
        },
        series: options
      }
      chart.setOption(option)
    }
  }
}
